<template>
  <div class="order-return-container">
    <div id="pie-echarts" class="order" />
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  mixins: [],
  data() {
    return {
      msg: 'hello world'
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const orderEchart = echarts.init(document.getElementById('pie-echarts'))
    const option = {
      color: ['#6748dc', '#24aaff', '#bd00ff', '#7b1d8c'],
      title: {
        text: '购买终端',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}数量 : {c};占比({d}%)',
        backgroundColor: 'rgba(0,0,0,.5)',
        textStyle: {
          color: '#fff'
        }
      },

      labelLine: {
        show: true,
        length: 300,
        length2: 100
      },

      series: [

        {

          type: 'pie',
          radius: [80, 140],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 0
          },
          data: [
            { value: 80, name: 'Android' },
            { value: 48, name: 'IOS' },
            { value: 36, name: 'PC' },
            { value: 24, name: 'Wap' }

          ]
        }
      ]
    }
    orderEchart.setOption(option)
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.order-return-container{
  width: 100%;
  height: 100%;
  .order{
    width: 100%;
    height: 100%;
  }
}
</style>
